<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant';
import { axiosrmedical } from '@/http/axiosRead';

interface Doctor {
  id: number;
  name: string;
  title: string;
  department: string;
}

const router = useRouter();
const route = useRoute();
const patientId = ref(route.query.patientId as string);
const campusId = ref(route.query.campusId as string);
const departmentId = ref(route.query.departmentId as string);
const departmentName = ref(route.query.departmentName as string);

const doctors = ref<Doctor[]>([]);
const loading = ref(false);

// 获取医生列表 (模拟数据，实际应该从API获取)
const fetchDoctors = async () => {
  loading.value = true;
  try {
    // 这里应该是真实的API调用，现在用模拟数据
    // const res = await axiosrmedical.get('/Doctor/GetDoctors', {
    //   params: { 
    //     campusId: campusId.value,
    //     departmentId: departmentId.value
    //   }
    // });
    
    // 模拟数据
    setTimeout(() => {
      doctors.value = [
        { id: 1, name: '张医生', title: '主任医师', department: departmentName.value },
        { id: 2, name: '李医生', title: '副主任医师', department: departmentName.value },
        { id: 3, name: '王医生', title: '主治医师', department: departmentName.value },
        { id: 4, name: '赵医生', title: '住院医师', department: departmentName.value }
      ];
      loading.value = false;
    }, 500);
  } catch (error) {
    console.error('获取医生列表出错:', error);
    showToast('网络错误，请稍后重试');
    loading.value = false;
  }
};

// 选择医生
const selectDoctor = (doctor: Doctor) => {
  router.push({
    path: '/appointment',
    query: { 
      patientId: patientId.value,
      campusId: campusId.value,
      departmentId: departmentId.value,
      doctorId: doctor.id.toString(),
      doctorName: doctor.name
    }
  });
};

// 返回上一页
const onBack = () => {
  router.back();
};

onMounted(() => {
  fetchDoctors();
});
</script>

<template>
  <div class="doctor-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar 
      title="选择医生" 
      left-arrow 
      @click-left="onBack">
      <template #right>
        <div class="nav-icons">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="circle-btn"></span>
        </div>
      </template>
    </van-nav-bar>

    <div class="scrollable-content">
      <div class="department-info">
        <div class="department-name">{{ departmentName }}</div>
        <div class="campus-name">院区: {{ campusId === '1' ? '东院' : campusId === '2' ? '北院' : '湘南院区' }}</div>
      </div>
      
      <!-- 医生列表 -->
      <div class="doctor-list">
        <van-loading v-if="loading" class="loading" size="24px" vertical>加载中...</van-loading>
        
        <template v-else>
          <div 
            v-for="doctor in doctors" 
            :key="doctor.id"
            class="doctor-item"
            @click="selectDoctor(doctor)"
          >
            <div class="doctor-avatar">
              <div class="avatar-placeholder">{{ doctor.name.substring(0, 1) }}</div>
            </div>
            <div class="doctor-info">
              <div class="doctor-name">{{ doctor.name }} <span class="doctor-title">{{ doctor.title }}</span></div>
              <div class="doctor-department">{{ doctor.department }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.doctor-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 6px;
  height: 6px;
  background: #d8d8d8;
  border-radius: 50%;
  display: inline-block;
}

.circle-btn {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8d8d8;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}

.department-info {
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.department-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.campus-name {
  font-size: 14px;
  color: #999;
}

.doctor-list {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.doctor-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fff;
}

.doctor-avatar {
  margin-right: 16px;
}

.avatar-placeholder {
  width: 50px;
  height: 50px;
  background-color: #eaf3fb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #4080ff;
  font-weight: 500;
}

.doctor-info {
  flex: 1;
}

.doctor-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
  font-weight: 500;
}

.doctor-title {
  font-size: 13px;
  color: #666;
  font-weight: normal;
  margin-left: 8px;
}

.doctor-department {
  font-size: 14px;
  color: #999;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}
</style> 